<template>
    <div class="top-container">
        <div class="top-item item1">
            设备总数<br>
            <span class="count">{{ deviceTotal }}</span>
        </div>
        <div class="top-item item2">
            在线设备数<br>
            <span class="count">{{ onlineDeviceCount }}</span>
        </div>
        <div class="top-item item3">
            离线设备数<br>
            <span class="count">{{ offlineDeviceCount }}</span>
        </div>
        <div class="top-item item4">
            工程总数<br>
            <span class="count">{{ projectTotal }}</span>
        </div>
        <div class="top-item item5">
            工单总数<br>
            <span class="count">{{ workOrderTotal }}</span>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "Top",
    data() {
        return {
            deviceTotal: 0, // 设备总数
            onlineDeviceCount: 0, // 在线设备数
            offlineDeviceCount: 0, // 离线设备数
            projectTotal: 0, // 工程总数
            workOrderTotal: 0, // 工单总数
        };
    },
    created() {
        // 组件挂载后发送请求获取数据
        axios.get('http://120.26.16.211:7001/count/countAll')
            .then(response => {
                console.log(response,'345');
                this.deviceTotal = response.data.data[0].value;
                this.onlineDeviceCount = response.data.data[1].value;
                this.offlineDeviceCount = response.data.data[2].value;
                this.projectTotal = response.data.data[3].value;
                this.workOrderTotal = response.data.data[4].value;
            })
            .catch(error => {
                console.error('请求数据失败：', error);
            });
    },
};
</script>

<style scoped>
.top-container {
    display: flex;
    justify-content: space-around;
}

.top-item {
    margin-top: 28px;
    height: 120px;
    margin-right: 0.5em;
    padding: 1em;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    line-height: 3em;
    font-size: 18px;
    font-weight: 700;
    
}

.count {
    font-size: 24px;
    font-weight: bold;
}

.item1 {
    background-color: #fdc660;
}

.item2 {
    background-color: #fda065;
}

.item3 {
    background-color: #f86b66;
}

.item4 {
    background-color: #e6003b;
}

.item5 {
    background-color: #8774f2;
}
</style>
